import React, { useEffect, useState } from 'react';

import { Button } from 'antd';
import { Editor } from 'slate';

import { useMatchMark, useToggle } from '../hooks';
import { ItemProps } from '../types';
import OptionBarBtn from '../../../../../components/option-bar-btn/OptionBarBtn';

/**
 * 文字下划线工具项
 */
export const UnderlineItem = React.memo(function UnderlineItem({ editor }: ItemProps) {
  const format = 'underline';
  const [value, setValue] = useState(false);
  const toggle: React.MouseEventHandler<HTMLElement> = useToggle(editor, format, value);
  const mark = (useMatchMark(editor, format) as boolean) ?? false;
  useEffect(() => {
    const curEditor = editor?.current?.editor;
    setValue(mark);
    if (mark && curEditor) Editor.removeMark(curEditor, 'delete');
  }, [editor, mark]);
  // return (
  //   <Button type={value ? 'primary' : 'default'} onMouseDown={toggle}>
  //     下划线
  //   </Button>
  // );
  return (
    <OptionBarBtn
      icon={(
        <div className='custom-option-bar-icon-container'>
          <i className='iconfont ghzs-color-a-zu736' style={{ fontSize: 18, fontWeight: 'bold' }} />
          <div className='custom-option-bar-icon-underline'></div>
        </div>
      )}
      size={'small'}
      onMouseDown={toggle}
      tooltipTitle={'下划线'}
      tooltipDesc={'⌥ ⌘ U'}
      active={value}
    />
  )
});
